// 发布文章页面
<template>
  <div class="article-edit-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item label="文章分类" prop="type">
        <el-select v-model="form.type" placeholder="请选择分类">
          <el-option
            v-for="item in categories"
            :key="item._id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="文章内容" prop="Context">
        <el-input
          type="textarea"
          :rows="15"
          v-model="form.Context"
          placeholder="请输入文章内容（支持Markdown语法）"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleEdit",
  computed: {},
  data() {
    return {
      isEdit: false,
      form: {
        id: null,
        Context: "",
        title: "",
        type: "",
      },
      categories: [], //分类数据
      rules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        category: [
          { required: true, message: "请选择文章分类", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
          { min: 10, message: "内容不能少于10个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // 如果是编辑模式，模拟文章数据
    if (this.$route.params.id) {
      this.isEdit = true;
      this.form = {
        id: this.$route.params.id,
        title: this.$route.params.title,
        Context: this.$route.params.Context,
        type: this.$route.params.type,
      };
    }
  },
  mounted() {
    this.getClassification();
  },
  methods: {
    // 获取分类
    getClassification() {
      axios.get("http://127.0.0.1:3000/api/Categorie").then(
        (response) => {
          // 将api数据赋值给data
          const data = response.data.data;
          // 最终将data数据赋值给list
          this.categories = data;
        },
        () => {
          this.$message.error("获取分类失败~~");
        }
      );
    },
    SaveIsComplete() {
      this.$router.push({
        name: "Articles",
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        const title = this.form.title;
        const Context = this.form.Context;
        const type = this.form.type;
        if (!valid) return;
        if (this.isEdit) {
          axios
            .patch(`http://127.0.0.1:3000/api/${this.form.id}`, {
              title,
              Context,
              type,
            })
            .then(() => {
              this.$message.success("文章更新成功");
              this.SaveIsComplete();
            })
            .catch(() => {
              this.$message.error("文章更新失败：");
            });
        } else {
          axios
            .post("http://127.0.0.1:3000/api/", { title, Context, type }) // 传递表单内容
            .then(() => {
              this.$message.success("创建成功");
              this.$router.push("/articles");
              // console.log(list); // 注意是form，不是from
            })
            .catch(() => {
              this.$message.error("创建失败");
            });
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.article-edit-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-select {
  width: 100%;
}
</style>
